<template>
  <section>
    <div class="type">
      <img :src="IMGBASE64.WODEGONGZUO2X" class="pink">
      <span class="title">图组类型</span>
      <!-- <el-button class="addBtn" type="success" size="small" @click="newshow">新增</el-button> -->
      <div class="row" v-for="item in typeArray">
        <div class="left">
          <span @click="getRightData(item)">{{item.dictDataValue}}</span>
        </div>
        <!-- <div class="right">
          <input type="button" class="icon">
        </div> -->
        <div class="clear"></div>
      </div>
    </div>
    <div class="manage">
      <img :src="IMGBASE64.WODEGONGZUO2X" class="pink">
      <span class="title">图组管理</span>
      <el-button class="addBtn" type="success" size="small" @click="newshow">新增</el-button>
      <div class="kong"></div>
      <template>
        <el-table :data="tablemsg" style="width: 100%">
          <el-table-column prop="projname" label="状态" align="center"></el-table-column>
          <el-table-column prop="checker" label="图片" align="center"></el-table-column>
          <el-table-column prop="sender" label="标题描述" align="center"></el-table-column>
          <el-table-column prop="werther" label="链接地址" align="center"></el-table-column>
          <el-table-column prop="werther" label="创建人" align="center"></el-table-column>
          <el-table-column prop="werther" label="创建时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button
                size="small"
                >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <div class="up" v-show="newShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增图组</span>
      <el-button icon="close" class="close" @click="newshow"></el-button>
      <header>
        <span class="header-title">基本信息</span>
      </header>
      <div class="form">
        <div class="content">
          <div class="left">
            <span>图片</span>
            <div class="uploadImg">
              <el-upload
                class="upload-demo1"
                list-type="picture-card"
                action="https://jsonplaceholder.typicode.com/posts/"
                :auto-upload="false"
                :on-change="getImg">
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
          <div class="right">
            <div class="row">
              <span>标题描述:</span><br>
              <textarea class="textarea" rows="3" cols="35" v-model="title"></textarea>
            </div>
            <div class="row">
              <span>链接地址:</span>
              <input type="text" v-model="imgUrl" class="text">
            </div>
            <div class="row">
              <span>状态:</span>
              <el-radio v-model="status" label="启用">启用</el-radio>
              <el-radio v-model="status" label="禁用">禁用</el-radio>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="right">
          <el-button type="success" size="small">确定</el-button>
        </div>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="newShow"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      typeArray: [],
      imgUrl: null,
      title: null,
      upShow2: false,
      dialogVisible: null,
      dialogImageUrl: null,
      filterText: null,
      status: null,
      data2: [{
        id: 1,
        label: '行政部'
      },
      {
        id: 2,
        label: '行政部'
      },
      {
        id: 3,
        label: '行政部'
      },
      {
        id: 4,
        label: '行政部'
      },
      {
        id: 5,
        label: '行政部'
      }],
      radio: '1',
      subjectSelect: null,
      subjectOption: ['复印油纸审批', '打印纸审批', '教学用品审批', '加班申请审批', '校车审批'],
      newShow: false,
      tablemsg: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value5: []
    }
  },
  mounted () {
    this.getLeftData()
  },
  methods: {
    successPreview (file) {
      let abc = []
      console.log(file.data)
      abc = file.data
      for (var i = 0; i < abc.length; i++) {
        this.form.attach.push(abc[i])
      }
    },
    newshow () {
      this.newShow = !this.newShow
      this.title = null
      this.imgUrl = null
    },
    afocuse () {
      this.upShow2 = true
    },
    ablur () {
      this.upShow2 = false
    },
    getLeftData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolConf/imageGroup/manage/dictData/list', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.typeArray = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getRightData (item) {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolConf/imageGroup/manage/queryById', {id: item.id}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tablemsg = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getImg (file) {
      console.log(file)
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
.form{
  .content{
    height: 175px;
    .left{
      width: 50%;
      float: left;
    }
    .right{
      width: 46%;
      float: left;
      margin-left: 4%;
      .row{
        padding: 10px 0;
      }
    }
    .clear{
      clear: both;
    }
  }
}
.textarea{
  resize : none; 
}
.text{
  border: 0;
  border-bottom: 1px solid #d7d7d7;
}
.type{
  width: 34%;
  position: relative;
  float: left;
  background: #FFF;
  margin-left: 2%;
  margin-top: 50px;
  border-radius: 5px;
  padding-top: 20px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  .row{
    border-bottom: 1px solid #d7d7d7;
    padding: 10px 0;
    margin-left: 3%;
    margin-right: 3%;
    span{
      margin-left: 20px;
      cursor: pointer;
    }
    .icon{
      margin-right: 20px;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }
    .clear{
      clear: both;
    }
  }
}
.manage{
  width: 60%;
  position: relative;
  float: right;
  background: #FFF;
  margin-left: 2%;
  margin-top: 50px;
  border-radius: 5px;
  padding-top: 20px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}
.pink{
  position: absolute;
  left: 24px;
  top: -25px;
}
.title{
  margin-left: 116px;
}
</style>

<style scoped>
  .choose{
    margin-left: 12%;
  }
  .secondLine{
    width: 55%;
    float: left;
  }
  .clear{
    clear: both;
  }
  .secondLine .filter-tree{
    margin-left: 15.6%;
    width: 50%; height: 40%;
    overflow: auto;
  }
  .addBtn{
    position: absolute; right: 2%;
  }
  div ul
  {
    /*position: relative;
    left: 12%;*/
  }
  .upload-demo1
  {
    min-height: 150px;
    border-radius: 10px;
    border: 2px dashed #d7d7d7;
    padding: 2px;
  }
  .el-upload--picture-card
  {
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  }
  .tree{
    position: relative; left: 60%;
    width: 40%;
  }
  .span{
    opacity: 0;
  }

  .up{
    width: 60% !important;
    position: absolute !important;
    top: 10% !important;
    left: 50% !important;
    margin-left: -30% !important;
    background: #FFF !important;
    padding: 20px 20px 0 20px !important;
    border-radius: 5px !important;
    z-index: 99999 !important;
  }
  .up .img{
    position: absolute;
    left: 24px;
    top: -20px;
  }
  .up .title{
    margin-left: 96px;
  }
  .up header{
    height: 24px !important;
    border-bottom: 2px solid #D7D7D7;
    padding: 30px 0 10px 0;
    margin-left: 1%;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .up .header-title{
    height: 24px !important;
    display: inline-block;
    color: #FB7862;
    border-bottom: 2px solid #FB7862;
    padding: 0 10px 10px 10px;
    margin-left: 0;
  }
  .up .form{
    margin-left: 10%;
    margin-right: 10px;
  }
  .up .form .firstLine{
    padding: 30px 0 10px 0;
  }
  .up .form .secondLine{
    padding: 30px 0 10px 0;
  }
  .up .form .form-longText{
    width: 50%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .up .form .form-text{
    width: 70%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .up ul{
    margin-top: 30px;
    margin-left: 75px;
  }
  .up ul li{
    float: left;
  }
  .up .bottom{
    border-top: 1px solid #D7D7D7;
    margin-top: 20px;
    background: #F8F8F8;
    padding: 8px 0;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0 0 5px 5px;
  }
  .up .bottom .right{
    text-align: right;
    padding: 0 10px 0 0;
  }
</style>
